<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css" media="screen">
		#flexiselDemo3 {
			position: relative;
			display: block;
	    width: 99999px;
	    margin: 0px;
	    padding: 0px;
	    list-style-type: none;
	    text-align: center;
		}
		#flexiselDemo3 li{
			display: list-item;
			float: left;
			position: relative;
		}
		#flexiselDemo3 li img {
			transform: scale(1, 1);
			transition: transform .4s linear;
		}
		#flexiselDemo3 li img.active {
			transform: scale(1.5, 1.5);
		}
	</style>
</head>
<body>
	<ul id="flexiselDemo3">
		<li><img src="https://9bitstudios.github.io/flexisel/images/1.jpg" /></li>
		<li><img src="https://9bitstudios.github.io/flexisel/images/2.jpg" /></li>
		<li><img src="https://9bitstudios.github.io/flexisel/images/3.jpg" /></li>
		<li><img src="https://9bitstudios.github.io/flexisel/images/4.jpg" /></li>					    	  	       	   	    	
	</ul> 
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.flexisel.js"></script>
	<script>
		$(window).load(function() {
			$("#flexiselDemo3").flexisel({
				visibleItems: 3,
				itemsToScroll: 1,         
				autoPlay: {
					enable: true,
					interval: 5000,
					pauseOnHover: true
				},
				before: function($c) { $c.find('li img').eq(8).addClass('active');$c.find('li img').eq(7).removeClass('active'); },
			}).find('li img').eq(7).addClass('active');		
		});
	</script>
</body>
</html>